<template>
  <el-container>
    <el-header class="header-bg" style="height: 150px;">关于{{ name }}数据管理11</el-header>
    <el-main>
      <el-button type="primary" @click="openJoinDialog">添加小麦数据信息</el-button>
      <el-table :data="tableData" border>
        <el-table-column prop="date" label="批次号" :min-width="150"></el-table-column>
        <el-table-column prop="name" label="粮食名称" :min-width="120"></el-table-column>
        <el-table-column prop="province" label="入库时粮食质量" :min-width="120"></el-table-column>
        <el-table-column prop="city" label="当前的粮食质量" :min-width="120"></el-table-column>
        <el-table-column prop="address" label="粮食品质等级" :min-width="120"></el-table-column>
        <el-table-column prop="zip" label="入库责任人" :min-width="120"></el-table-column>
        <el-table-column prop="zip" label="出库责任人" :min-width="120"></el-table-column>
        <el-table-column prop="zip" label="是否出库" :min-width="120"></el-table-column>
        <el-table-column prop="zip" label="入库时间" :min-width="120"></el-table-column>
        <el-table-column prop="zip" label="出库时间" :min-width="120"></el-table-column>
        <el-table-column label="操作" :min-width="160">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="handleLog(scope.row)" type="text" size="small">记录</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>

    <el-dialog title="添加小麦入库信息" :visible.sync="joinDialogVisible">
      <el-form :model="form">
        <el-form-item label="批次号">
          <el-input v-model="form.batch_id"></el-input>
        </el-form-item>
        <el-form-item label="粮食名称">
          <el-input v-model="form.type_id"></el-input>
        </el-form-item>
        <el-form-item label="入库时粮食质量">
          <el-input v-model="form.join_grain_amount"></el-input>
        </el-form-item>
        <el-form-item label="当前的粮食质量">
          <el-input v-model="form.current_grain_amount"></el-input>
        </el-form-item>
        <el-form-item label="粮食品质等级">
          <el-select v-model="form.grain_quality">
            <el-option label="一等" value="一等"></el-option>
            <el-option label="二等" value="二等"></el-option>
            <el-option label="三等" value="三等"></el-option>
            <el-option label="四等" value="四等"></el-option>
            <el-option label="五等" value="五等"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="粮食来源地">
          <el-input v-model="form.origin"></el-input>
        </el-form-item>
        <el-form-item label="入库责任人">
          <el-input v-model="form.join_person"></el-input>
        </el-form-item>
        <el-form-item label="是否出库">
          <el-switch v-model="form.is_out"></el-switch>
        </el-form-item>
        <el-form-item label="入库时间">
          <el-date-picker v-model="form.join_time" type="datetime" placeholder="选择日期时间"></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="joinDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveBatchInfo">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加小麦出库信息" :visible.sync="leaveDialogVisible">
      <el-form :model="form">
        <el-form-item label="批次号">
          <el-input v-model="form.batch_id"></el-input>
        </el-form-item>
        <el-form-item label="出库责任人">
          <el-input v-model="form.leave_person"></el-input>
        </el-form-item>
        <el-form-item label="出库时间">
          <el-date-picker v-model="form.leave_time" type="datetime" placeholder="选择日期时间"></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="leaveDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveLeaveInfo">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="日常记录信息" :visible.sync="logDialogVisible">
      <el-form :model="logForm">
        <el-form-item label="记录ID">
          <el-input v-model="logForm.log_id"></el-input>
        </el-form-item>
        <el-form-item label="批次号">
          <el-input v-model="logForm.batch_id"></el-input>
        </el-form-item>
        <el-form-item label="通风情况">
          <el-input v-model="logForm.ventilate"></el-input>
        </el-form-item>
        <el-form-item label="温度">
          <el-input v-model="logForm.temperature"></el-input>
        </el-form-item>
        <el-form-item label="相对湿度">
          <el-input v-model="logForm.relative_humidity"></el-input>
        </el-form-item>
        <el-form-item label="是否损耗">
          <el-switch v-model="logForm.is_loss"></el-switch>
        </el-form-item>
        <el-form-item label="损耗质量">
          <el-input v-model="logForm.loss_amount"></el-input>
        </el-form-item>
        <el-form-item label="损耗原因及处理方式">
          <el-input v-model="logForm.reason" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="记录人">
          <el-input v-model="logForm.log_person"></el-input>
        </el-form-item>
        <el-form-item label="记录时间">
          <el-date-picker v-model="logForm.log_time" type="datetime" placeholder="选择日期时间"></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="logDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveLogInfo">保存</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
export default {
  data () {
    return {
      name: '',
      tableData: [
        // 表格数据
      ],
      joinDialogVisible: false,
      leaveDialogVisible: false,
      logDialogVisible: false,
      form: {
        batch_id: '',
        type_id: '',
        join_grain_amount: '',
        current_grain_amount: '',
        grain_quality: '',
        origin: '',
        join_person: '',
        leave_person: '',
        is_out: false,
        join_time: '',
        leave_time: ''
      },
      logForm: {
        log_id: '',
        batch_id: '',
        ventilate: '',
        temperature: '',
        relative_humidity: '',
        is_loss: false,
        loss_amount: '',
        reason: '',
        log_person: '',
        log_time: ''
      }
    }
  },
  created () {
    console.log(6666)
    this.name = this.$route.query.name || ''
    console.log(this.name)
  },
  methods: {
    openJoinDialog () {
      this.resetForm()
      this.joinDialogVisible = true
    },
    openLeaveDialog () {
      this.resetForm()
      this.leaveDialogVisible = true
    },
    resetForm () {
      this.form = {
        batch_id: '',
        type_id: '',
        join_grain_amount: '',
        current_grain_amount: '',
        grain_quality: '',
        origin: '',
        join_person: '',
        leave_person: '',
        is_out: false,
        join_time: '',
        leave_time: ''
      }
    },
    handleView (row) {
      console.log('查看', row)
      // 展示具体信息逻辑
    },
    handleEdit (row) {
      console.log('编辑', row)
      this.form = { ...row } // 假设 row 中的字段与 form 一致
      this.joinDialogVisible = true
    },
    handleLog (row) {
      console.log('记录', row)
      this.logForm.batch_id = row.batch_id // 假设 row 中的字段与 logForm 一致
      this.logDialogVisible = true
    },
    saveBatchInfo () {
      console.log('保存批次信息', this.form)
      // 保存逻辑
      this.joinDialogVisible = false
    },
    saveLeaveInfo () {
      console.log('保存出库信息', this.form)
      // 保存逻辑
      this.leaveDialogVisible = false
    },
    saveLogInfo () {
      console.log('保存日常记录信息', this.logForm)
      // 保存逻辑
      this.logDialogVisible = false
    }
  }
}
</script>

<style scoped>
.header-bg {
  background-image: url('../assets/小麦.jpg');
  background-size: cover;
  background-position: center;
  color: #000000;
  text-align: center;
  line-height: 150px;
  font-size: 40px;
}

.el-main {
  padding: 20px;
}

.el-table th,
.el-table td {
  text-align: center;
}

.dialog-footer {
  text-align: right;
}
</style>
